<template>
  <div>
    <van-nav-bar
      title="购物车"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-tabs v-model="active" @click="change">
      <van-tab
        :title="item.name"
        v-for="item in ju"
        :key="item.id"
        :name="item.id"
      ></van-tab>
    </van-tabs>

   <!-- 等待加载 -->
    <van-loading type="spinner" color="#1989fa" v-show="flag" />

    <van-card
      v-for="item in fen"
      :key="item.id"
      :num="item.sort_order"
      :price="item.retail_price"
      :desc="item.goods_brief"
      :title="item.name"
      :thumb="item.list_pic_url"
      @click="add(item.id)"
    >
      <template #right>
        <img v-lazy="item.list_pic_url" />
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "",
      ju: [],
      fen: [],
   
      flag: true,
    };
  },

  mounted() {
    this.$http(
      "//shop.bufantec.com/bufan/category/categoryNav?id=1005000",
      "get"
    ).then((res) => {
      console.log(res);
      this.ju = res.data.navData;
    });

    this.$http(
      "//shop.bufantec.com/bufan/goods/goodsList?categoryId=1005000",
      "get",
      {}
    ).then((res) => {
      console.log(res);
      this.fen = res.data.data;
     
      this.flag = false;
    });
  },
  methods: {
    change() {
      this.$http(
        "//shop.bufantec.com/bufan/goods/goodsList?",
        "get",
        {},
        { categoryId: this.active }
      ).then((res) => {
        console.log(res);
        this.fen = res.data.data;
      });
    },
    add(id) {
      this.$router.push({ path: "/data", query: { id } });
    },
    onClickLeft() {
      this.$router.go(-1); 
    },
  },
};
</script>

<style lang="scss"></style>
